<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Insert title here</title>
<!--引入wangEditor.css-->
<link rel="stylesheet" type="text/css" href="../dist/css/wangEditor.min.css">
<style type="text/css">
html,body{margin:auto;  }
#content{ width:360px;margin:auto; } 
</style>
</head>
<body>
<!--用父容器来控制宽度-->
<div id="content">
    <!--用当前元素来控制高度-->
    <div id="div1" style="height:880px;max-height:880px;">
        <p>请输入内容...</p>
    </div>
</div>
<button id='btn1'>tijiao</button>

<!-- <form action="/wangeditor/WangEditorImgUpload" enctype="multipart/form-data" method="post"> -->
<!--   <input type="file" name="myFileName"/> -->
<!--   <input type="submit" name="myFileName"/> -->
<!-- </form> -->

</body>
<!--引入jquery和wangEditor.js-->   <!--注意：javascript必须放在body最后，否则可能会出现问题-->
<script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/js/wangEditor.js"></script>
<!--这里引用jquery和wangEditor.js-->

<script type="text/javascript">

//阻止输出log
// wangEditor.config.printLog = false;

    var editor = new wangEditor('div1');
    
    // 上传图片（举例）
    editor.config.uploadImgUrl = getContextPath()+'/WangEditorImgUpload';
   
    // 配置自定义参数（举例）
    editor.config.uploadParams = {
        token: 'abcdefg',
        user: 'wangfupeng1988'
    };
    

    // 设置 headers（举例）
    editor.config.uploadHeaders = {
    		 'Accept' : 'text/x-json'
    };
   
    editor.config.uploadImgFileName = 'myFileName'
    
    // 表情显示项
    editor.config.emotionsShow = 'icon';//icon/value
    editor.config.emotions = {
            'default': {
                title: '默认',
                data: '../dist/js/emotions.data'
            },
            'weibo': {
                title: '微博表情',
                data: [
                	 {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif',
                         value: '[草泥马]'    
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif',
                         value: '[神马]'    
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif',
                         value: '[浮云]'    
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif',
                         value: '[给力]'    
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif',
                         value: '[围观]'    
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif',
                         value: '[威武]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif',
                         value: '[熊猫]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif',
                         value: '[兔子]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif',
                         value: '[奥特曼]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif',
                         value: '[囧]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif',
                         value: '[互粉]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif',
                         value: '[礼物]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif',
                         value: '[呵呵]'
                     },
                     {
                         icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif',
                         value: '[哈哈]'
                     }
                ]
            }
        };

        // 插入代码时的默认语言
        //  editor.config.codeDefaultLang = 'html'

        // 只粘贴纯文本
        // editor.config.pasteText = true;

        // 跨域上传
        // editor.config.uploadImgUrl = 'http://localhost:8012/upload';

        // 第三方上传
        // editor.config.customUpload = true;

        // 普通菜单配置
        // editor.config.menus = [
        //     'img',
        //     'insertcode',
        //     'eraser',
        //     'fullscreen'
        // ];
        // 只排除某几个菜单（兼容IE低版本，不支持ES5的浏览器），支持ES5的浏览器可直接用 [].map 方法
        // editor.config.menus = $.map(wangEditor.config.menus, function(item, key) {
        //     if (item === 'insertcode') {
        //         return null;
        //     }
        //     if (item === 'fullscreen') {
        //         return null;
        //     }
        //     return item;
        // });

        // onchange 事件
        editor.onchange = function () {
            console.log(this.$txt.html());
        };

        // 取消过滤js
        // editor.config.jsFilter = false;

        // 取消粘贴过来
        // editor.config.pasteFilter = false;

        // 设置 z-index
        // editor.config.zindex = 20000;

        // 语言
        // editor.config.lang = wangEditor.langs['en'];

        // 自定义菜单UI
        // editor.UI.menus.bold = {
        //     normal: '<button style="font-size:20px; margin-top:5px;">B</button>',
        //     selected: '.selected'
        // };
        // editor.UI.menus.italic = {
        //     normal: '<button style="font-size:20px; margin-top:5px;">I</button>',
        //     selected: '<button style="font-size:20px; margin-top:5px;"><i>I</i></button>'
        // };
    
    // 隐藏掉插入网络图片功能。该配置，只有在你正确配置了图片上传功能之后才可用。
    editor.config.hideLinkImg = false;
    
    
    editor.create();
    
    $('#btn1').click(function () {
        // 获取编辑器区域完整html代码
        var html = editor.$txt.html();
  alert(html);
        // 获取编辑器纯文本内容
       // var text = editor.$txt.text();

        // 获取格式化后的纯文本
       // var formatText = editor.$txt.formatText();
    });
    

    /**
     * 访问地址
     */
    function getContextPath() {
    	// 获取当前网址，如：http://localhost:8080/ssm/index.jsp
    	var currentPath = window.document.location.href;
    	// 获取主机地址之后的目录，如： /ssm/index.jsp
    	var pathName = window.document.location.pathname;
    	var pos = currentPath.indexOf(pathName);
    	// 获取主机地址，如： http://localhost:8080
    	var localhostPath = currentPath.substring(0, pos);
    	// 获取带"/"的项目名，如：/ssm
    	var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    	// 	    alert("currentPath:" + currentPath + "\n"
    	// 	            + "pathName:" + pathName + "\n"
    	// 	            + "localhostPath:" + localhostPath + "\n"
    	// 	            + "projectName:" + projectName + "\n"
    	// 	            + "contextPath:"+ localhostPath + projectName);
    	return(localhostPath + projectName);
    }
</script>
</html>